<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="560px" @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="programModel" :rules="dialogProps.action === 'add' ? addProgram : editProgram" ref="programForm"
      label-width="80px" label-position="right" size="small">
      <el-tabs type="border-card" v-model="activeTabName">
        <el-tab-pane name="programInfoTab" label="基本信息" class="program-info-tab-pane">
          <el-form-item label="方案标题" prop="title">
            <el-col :span="16">
              <el-input ref="encode" v-model="programModel.encode" type="hidden"></el-input>
              <el-input ref="title" :maxlength="32" v-model="programModel.title" autofocus></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="关键词" prop="keyword">
            <el-col :span="16">
              <el-input :maxlength="32" v-model="programModel.keyword" autofocus></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="方案类别" prop="sid">
            <el-select v-model="programModel.sid" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-col :span="16">
              <el-input type="textarea" :maxlength="200" v-model="programModel.content"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="备注" prop="comment">
            <el-col :span="16">
              <el-input type="textarea" :maxlength="32" v-model="programModel.comment"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="禁用建议" prop="locked">
            <el-switch v-model="programModel.locked" active-color="#ff4949" inactive-color="#13ce66" :active-value="1"
              :inactive-value="0"></el-switch>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('programForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { saveProgram, updateProgram } from '@/api/Lixueseng520/program'

  export default {
    name: "program-edit",
    data() {
      return {
        options: [
          { value: '1', label: '心理干预' },
          { value: '2', label: '戒烟限酒' },
          { value: '3', label: '饮食干预' },
          { value: '4', label: '注意事项' },
          { value: '5', label: '运动干预' }
        ],
        loading: false,
        programModel: {
          id: 0,
          encode: '',
          title: '',
          keyword: '',
          sid: '',
          content: '',
          comment: '',
          locked: '',
          roleIds: []
        },
        roleCheckboxList: {
          checkAll: false,
          isIndeterminate: true,
        },
        dialogProps: {
          visible: false,
          action: '',
          title: ''
        },
        activeTabName: 'programInfoTab',
        addProgram: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          keyword: [
            { required: true, message: '请输入关键词', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          sid: [
            { required: true, message: '请选择方案类别', trigger: 'change' }
          ],
          // content: [
          //   { required: true, message: '请输入内容', trigger: 'blur' },
          //   { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          // ],
          // comment: [
          //   { required: true, message: '请输入备注', trigger: 'blur' },
          //   { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          // ]
        },
        editProgram: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          keyword: [
            { required: true, message: '请输入关键词', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          // content: [
          //   { required: true, message: '请输入内容', trigger: 'blur' },
          //   { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          // ],
          // comment: [
          //   { required: true, message: '请输入备注', trigger: 'blur' },
          //   { min: 3, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
          // ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.dialogProps.action === 'add') {
              this.doSaveProgram()
            } else {
              this.doUpdateProgram()
            }
          } else {
            return false
          }
        })
      },
      doUpdateProgram() {
        if (this.programModel.sid == '心理干预') {
          this.programModel.sid = 1
        }
        if (this.programModel.sid == '戒烟限酒') {
          this.programModel.sid = 2
        }
        if (this.programModel.sid == '饮食干预') {
          this.programModel.sid = 3
        }
        if (this.programModel.sid == '注意事项') {
          this.programModel.sid = 4
        }
        if (this.programModel.sid == '运动干预') {
          this.programModel.sid = 5
        }
        this.loading = true
        updateProgram(this.programModel.id, this.programModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      doSaveProgram() {
        this.loading = true
        saveProgram(this.programModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      handleDialogClose() {
        this.dialogProps.visible = false
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['programForm'].clearValidate()
          this.$refs['encode'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.$on('openEditUserDialog', function (program) {
          if (program.sid == 1) {
            program.sid = '心理干预'
          }
          if (program.sid == 2) {
            program.sid = '戒烟限酒'
          }
          if (program.sid == 3) {
            program.sid = '饮食干预'
          }
          if (program.sid == 4) {
            program.sid = '注意事项'
          }
          if (program.sid == 5) {
            program.sid = '运动干预'
          }
          this.programModel = program
          this.dialogProps.action = 'edit'
          this.dialogProps.title = '编辑'
          this.activeTabName = 'programInfoTab'
          this.dialogProps.visible = true
        })
        this.$on('openAddUserDialog', function () {
          this.programModel = {
            roleIds: []
          }
          this.dialogProps.action = 'add'
          this.dialogProps.title = '新增'
          this.activeTabName = 'programInfoTab'
          this.dialogProps.visible = true
        })
      })
    },
  }
</script>

<style lang="scss" scoped>
  .program-info-tab-pane {
    margin-top: 10px;
  }
</style>
